<template>
  <ElConfigProvider :locale="elLocaleMap[currentLocale.lang]" :message="{ max: 1 }">
    <router-view :class="greyMode ? 'app-grey-mode' : ''" />
  </ElConfigProvider>
</template>

<script lang="ts" setup>
import { useWindowSize } from '@vueuse/core'
import { elLocaleMap } from '@/plugins/element-plus'
import { useAppStore } from '@/store/modules/app'
import { useLocaleStore } from '@/store/modules/locale'

const appStore = useAppStore()
const localeStore = useLocaleStore()

const greyMode = computed(() => appStore.greyMode)
const currentLocale = computed(() => localeStore.currentLocale)

// 监听窗口变化
const { width } = useWindowSize()
watch(
  () => width.value,
  (width: number) => {
    if (width < 768) {
      appStore.setMobile(true)
      appStore.setCollapse(true)
    } else {
      appStore.setMobile(false)
    }
  },
  {
    immediate: true
  }
)

onMounted(() => {
  // 根据系统设置情景模式
  appStore.initTheme()
})
</script>

<style lang="scss" scoped>
.app-grey-mode {
  filter: grayscale(100%);
}
</style>
